<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>王者荣耀</li>
    </ul>
    <div class="test">周杰伦</div>
    <script>
        // 1.创建元素
        var li = $('<li>虞姬</li>');
        var li2 = $('<li>程咬金</li>');
        var div1 = $('<div>双截棍</div>');
        var div2 = $('<div>龙卷风</div>');
  
        // 2.元素的内部追加元素
        $('ul').append(li);

        // 3.元素的内部  头部插入元素
        $('ul').prepend(li2);

        // 4.元素的后面添加元素
        $('.test').after(div1);

        // 5.元素的前面插入元素
        $('.test').before(div2);
        // 6.元素自己的删除
        // $('ul').remove();

        // 7.元素内部清空
        // $('ul').empty();

        // 8.通过内容的重新赋值
        $('ul').html("");
    </script>
</body>
</html>